<template>
  <div class="course-chapter-wrap" ref="course-wrap">
    <div
      class="btn-fold"
      v-if="type == 1 || type == 5"
      @click="handleFold"
      :style="foldStyle"
    >
      <span
        :class="left == 0 ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
      ></span>
    </div>
    <div
      class="course-chapter"
      style="margin-top: 0"
      v-if="type == 1 || type == 5"
    >
      <el-container>
        <el-aside class="chapter-aside" :style="asideStyle">
          <ChapterTree />
        </el-aside>
        <el-container>
          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
    <div v-else>
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  components: {
    ChapterTree: () => import('./ChapterTree.vue'),
  },
  data() {
    return {
      type: this.$route.meta.type,
      width: 350,
      left: 340,
      wrapHeight: 500,
    }
  },
  computed: {
    foldStyle() {
      return {
        left: this.left + 'px',
        height: this.wrapHeight + 'px',
        lineHeight: this.wrapHeight + 'px',
      }
    },
    asideStyle() {
      return {
        width: this.width + 'px',
        height: this.wrapHeight + 'px',
        borderRight: '12px solid transparent',
      }
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    handleFold() {
      this.width = this.width == 350 ? 0 : 350
      this.left = this.left == 340 ? 0 : 340
    },
    init() {
      let wHeight = document.body.clientHeight
      let topDistance = this.$refs['course-wrap'].getBoundingClientRect().top
      this.wrapHeight = wHeight - topDistance - 45
    },
  },
}
</script>
<style scoped>
.course-chapter-wrap {
  position: absolute;
  left: 10px;
  top: 15px;
  right: 20px;
  bottom: 0px;
}
.el-main {
  text-align: left;
}
.course-chapter .el-main {
  background: #fff;
  padding-top: 0;
}
.btn-fold {
  width: 12px;
  height: 777px;
  line-height: 777px;
  background: #f5f5f5;
  position: absolute;
  left: 0px;
  top: 0;
  cursor: pointer;
  border-radius: 5px;
}
.btn-fold:hover {
  background: #ddd;
}
.btn-fold span {
  font-weight: bold;
  color: #fff;
  background: var(--colorA1);
  display: inline-block;
  width: 12px;
  height: 26px;
  line-height: 26px;
  border-radius: 3px;
}
</style>